<template>
  <div class="">
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptions"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 20px">
      <BasicTitle :title="t('custom.平均纱支变化趋势')"></BasicTitle>
      <div id="zheXianID" style="height: 400px"> </div>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import { columns } from './data'
  import { COLOR_ARR } from '@/utils/constants'
  import { hexToRgba } from '@/utils/custom'
  import { getXiShaBaoBiao, getXiShaBaoBiaoQuShiTu, getHuoQuDaBiaoLv } from '@/api/shengChanJianShi'

  const { t } = useI18n()
  const averageCount = ref()
  const openDays = ref()

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-xishabaobiao`, // id用于缓存,务必配置
    height: 500,
    loading: true,
    showFooter: true,
    columns,
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: t('export.统计报表')
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          } else if (columnIndex === 1) {
            let count = 0
            data.forEach((item) => {
              count += item.yarnCount
            })
            return (count / data.length).toFixed(1)
          } else if (columnIndex === 2) {
            let count = 0
            data.forEach((item) => {
              count += item.actualYarnWeight
            })
            return count.toFixed(2)
          } else if (columnIndex === 5) {
            let count = 0
            data.forEach((item) => {
              count += item.coefficientYarnWeight
            })
            return count.toFixed(2)
          } else {
            return '--'
          }
        })
      ]
    }
  })

  const getList = () => {
    getXiShaBaoBiao({ begin: 25062200, end: 25072299 })
      .then((res: any) => {
        gridOptions.loading = false
        gridOptions.data = res.details
        averageCount.value = res.yarnCount
        openDays.value = res.dayCnt
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  const zeXianXzhou = ref<any>([])
  const zeXianTuData = ref<any>([])
  const dianJiaData = ref<any>([])
  const insertStr = (source, start, newStr) => {
    return source.slice(0, start) + newStr + source.slice(start)
  }
  const getChartData = () => {
    getXiShaBaoBiaoQuShiTu({ begin: 25062200, end: 25072299 }).then((res: any) => {
      res.forEach((value) => {
        let riQi = value.tsidDay.toString().slice(2)
        zeXianXzhou.value.push(insertStr(riQi, 2, '-'))
        zeXianTuData.value.push(value.yarnCount)
        dianJiaData.value.push(Math.round(value.energyPriceUnit * 1000) / 1000)
      })
      handleSetVisitChart()
    })
  }
  const myChart = ref()
  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('zheXianID'))
    let option = {
      backgroundColor: '#fff',
      color: COLOR_ARR,
      legend: {
        top: 10
      },
      tooltip: {
        trigger: 'axis'
        // formatter: function(prams) {
        //   return prams[0].axisValue + '<br/>'  + prams[0].data + ' Nm³'
        // }
      },
      grid: {
        top: 55,
        left: 40,
        right: 45,
        bottom: 30,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          // axisLabel: {
          //   interval: 0,//横轴信息全部显示
          //   rotate: -15, //倾斜度 -90 至 90 默认为0
          //   margin: 10, //刻度标签与轴线之间的距离
          //   textStyle: {
          //     color: "#333",//颜色
          //   },
          // },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#333'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#D9D9D9'
            }
          },
          data: zeXianXzhou.value
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '平均纱支',
          axisLabel: {
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e3e1e1'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e3e1e1'
            }
          },
          axisTick: {
            show: false
          }
        },
        {
          type: 'value',
          name: '元',
          axisLabel: {
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e3e1e1'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e3e1e1'
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: '平均纱支',
          type: 'line',
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: COLOR_ARR[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(COLOR_ARR[0], 0.5),
              shadowOffsetY: 8
            }
          },
          symbol: 'circle', // 数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(COLOR_ARR[0], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(COLOR_ARR[0], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(COLOR_ARR[0], 0.1),
              shadowBlur: 10
            }
          },
          data: zeXianTuData.value
        },
        {
          // name: "2018",
          name: '电价',
          type: 'line',
          smooth: true,
          symbolSize: 8,
          yAxisIndex: 1,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: COLOR_ARR[1],
              shadowBlur: 3,
              shadowColor: hexToRgba(COLOR_ARR[1], 0.5),
              shadowOffsetY: 8
            }
          },
          symbol: 'circle', // 数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(COLOR_ARR[1], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(COLOR_ARR[1], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(COLOR_ARR[1], 0.1),
              shadowBlur: 10
            }
          },
          data: dianJiaData.value
        }
      ]
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  onMounted(() => {
    getList()
    getChartData()
  })
</script>
